import ColGroup from "./ColGroup";
import { useForm } from "../../../framework/common/context/metadata-context";
import clsx from "clsx";
import { forwardRef, useEffect, useLayoutEffect, useRef, useState } from "react";
import useTableReady from "./useTableReady";
import Header from "./Header";
import eventBus, { useSubscribe } from "../../../framework/common/eventBus";
import { useSize, useUpdate } from "ahooks";
import jQuery  from "jquery";

export default forwardRef(function ({scale, hasOperationColumn, scrollBarWidth, hasData, group, isSetFixedColumnPc,data=[] ,wrapperRef}, ref) {
  const form = useForm();
  const { isReady } = useTableReady(group.code + ".ready");

  const realHeightRef=useRef(null)
  const size = useSize(ref);
  useEffect(() => {
    realHeightRef.current=jQuery(ref.current)?.height();
    eventBus.publish("operation.header.update." + group.code, (realHeightRef.current || 41) + "px");
  });
  
  if (isReady === false) return null;

  // let marginRight= 0 
  let paddingRight=hasOperationColumn ? 64 - scrollBarWidth + "px" : 0 
  if(group.style.width>970){
    //  marginRight=hasOperationColumn ? 64 - scrollBarWidth + "px" : 0 
     paddingRight=0;
  }
  if(scale===1 && group.style.width <1039){
    scale= 1039/ (group.style.width||1039) 
  }
  let theTable = (
    <div
      style={{paddingRight }}
      className={clsx(scrollBarWidth > 0 && "has-scroll-bar", hasData ? "overflow-hidden header-hidden" : "overflow-auto", "runtime-data-list   header-table", form.showBorder && "hasBorder")}
    >
      <table ref={ref} className="min-w-full table-process-form" style={{paddingRight: hasOperationColumn ? 64 - scrollBarWidth + "px" : 0 , width: group?.style?.width + "px" }}>
        <ColGroup data={data} scale={scale} isFiexedTable={isSetFixedColumnPc} group={group} fields={group.fields} fixedColum={998}></ColGroup>
        <Header wrapperRef={wrapperRef} scale={scale} group={group} fields={group.fields}></Header>
      </table>
    </div>
  );

  //如果没有固定列
  if (isSetFixedColumnPc === false) {
    return (
      <div className="relative mt-2 runtime-data-list-wrapper header-table-wrapper">
        {theTable}
        {hasOperationColumn&& <OperationHeaderTable height={realHeightRef.current}></OperationHeaderTable>}
      </div>
    );
  }

  let fixedColumnPc=(group.fixedColumnPc || 0) + (group.loop_table_sid?1:0);
  let actualHeight=(realHeightRef.current||41)+"px";
  return (
    <div className="relative mt-2 runtime-data-list-wrapper header-table-wrapper">
      {theTable}
      <table className={clsx("absolute top-0 left-0 bg-white runtime-data-list fixed-table table-process-form", hasData === false && "has-no-data")} style={{ zIndex: 2,height:actualHeight }}>
        <ColGroup scale={scale} data={data} isFromFixedTable={true} isFiexedTable={true} fixedColum={fixedColumnPc} group={group} fields={group.fields} ></ColGroup>
        <Header wrapperRef={wrapperRef} actualHeight={(realHeightRef.current?realHeightRef.current-1:40)+"px"} scale={scale} isFromFixedTable={true} fixedColum={fixedColumnPc} group={group} fields={group.fields} ></Header>
      </table>
      {hasOperationColumn && <OperationHeaderTable height={realHeightRef.current}></OperationHeaderTable>}
    </div>
  );
});

//操作列表格 后面可以扩展成右固定列
function OperationHeaderTable({ height=41 }) {

  let thead = (
    <thead>
      <tr style={{height:(height-1)+"px"}}>
        <th className="">操作</th>
      </tr>
    </thead>
  );

  return (
    <table className={clsx("absolute top-0 right-0 bg-white runtime-data-list fixed-table border-r table-process-form")} style={{ zIndex: 2, height: height+"px" }}>
      <colgroup>
        <col style={{ width: "64px" }}></col>
      </colgroup>
      {thead}
    </table>
  );
}
